/* Dark mode colors. */
:root {
  --sl-color-accent-low: #232327;
  --sl-color-accent: #686875;
  --sl-color-accent-high: #c8c8cd;
  --sl-color-white: #ffffff;
  --sl-color-gray-1: #eeeeee;
  --sl-color-gray-2: #c2c2c2;
  --sl-color-gray-3: #8b8b8b;
  --sl-color-gray-4: #585858;
  --sl-color-gray-5: #383838;
  --sl-color-gray-6: #272727;
  --sl-color-black: #181818;
}
/* Light mode colors. */
:root[data-theme='light'] {
  --sl-color-accent-low: #d6d6da;
  --sl-color-accent: #6a6a77;
  --sl-color-accent-high: #323237;
  --sl-color-white: #181818;
  --sl-color-gray-1: #272727;
  --sl-color-gray-2: #383838;
  --sl-color-gray-3: #585858;
  --sl-color-gray-4: #8b8b8b;
  --sl-color-gray-5: #c2c2c2;
  --sl-color-gray-6: #eeeeee;
  --sl-color-gray-7: #f6f6f6;
  --sl-color-black: #ffffff;
}

:root {
  --sl-sidebar-width: 22rem;
}

:root[data-theme='light'] .sl-badge {
  opacity: 0.3;
}

.home-button {
  text-decoration: none;
  margin: 0 8px;
  border: 2px solid #666;
  padding: 10px 16px;
  border-radius: 4px;
}

.home-button.primary {
	background-color: var(--sl-color-accent-high);
	color: var(--sl-color-black)!important;
}

.console-demo-image {
  border: solid 2px #666;
  border-radius: 6px;
  background-color: #eee;
}

.playground-iframe {
  width: 100%;
  border: solid 2px #666;
  border-radius: 6px;
  background-color: #eee;
}

#canvas {
  z-index: 11!important;
}
